<template>
    <div>
      <Header></Header>
      <div>
        <group>
            <section class="comment">
                <dl v-for="(item,index) in list" :key="index">
                    <dd>
                        <img class="icon" :src="item.icon" :alt="item.name">                
                    </dd>
                    <dd>
                        <div class="name">
                            <span>{{item.name}}</span><span>{{item.time}}</span>
                        </div>
                        <p><a></a></p>
                        <div class="toolbar">
                            <a>{{item.comment}}</a>
                            <a>回复 {{item.replyNum}}</a>
                        </div>
                    </dd>
                </dl>
            </section> 
            <section v-if="!list" class="tips">我还没有相关数据</section>          
        </group>
      </div>
      <Footer></Footer>
    </div>
</template>

<script>
import Header from '@/components/commons/header/header'
import Footer from '@/components/commons/footer/footer'
    export default {
        name: 'commentReply',
        data () {
            return {
                received: 0,
                list: [
                    {   
                        id: 4,
                        icon: 'http://img.17k.com/avatar/2015/869/41830869/20150620081307968-1512549509000_50.jpg',
                        name: '阿镐',
                        time: '2018-05-01',
                        comment:'智障树智障树智障树智障树智障树智障树智障树智障树智障树智障树智障树..',
                        replyNum: 1
                    }
                ]
            }
        },
        components: {Header,Footer},
        methods: {
            getList(){
                console.log(this.received)
            }
        }
    }
</script>

<style scoped>
.vux-button-group > a.vux-button-group-current{
    background:#f60;
}
.vux-button-group > a.vux-button-tab-item-first:after{
    border: 1px solid #f60;
}
.vux-button-group > a.vux-button-tab-item-last:after{
    border: 1px solid #f60;
}
section.comment {
    padding: 1.5em;
}
section.comment dl {
    display: -webkit-box;
    display: -ms-flexbox;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #CDCDCD;
}
section.comment dl dd:first-child {
    width: 65px;
}
section.comment dl dd:first-child img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
section.comment dl dd:last-child {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    display: block;
}
section.comment dl .name {
    font-size: 1.2em;
    display: -webkit-box;
    display: -ms-flexbox;
}
section.comment dl p {
    margin: 0;
    font-size: 1.2em;
    word-break: break-all;
}
section.comment dl .toolbar {
    display: -webkit-box;
    display: -ms-flexbox;
}
section.comment dl .name span:first-child {
    color: #F60;
}
section.comment dl .name span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    display: block;
}
section.comment dl .name span:last-child {
    text-align: right;
    color: #999;
}

section.comment dl .name span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    display: block;
}
dl.TAB dd.CONT label.node a {
    overflow: hidden;
    clear: both;
    display: block;
    padding: 1em;
    border-bottom: 1px solid #CDCDCD;
}

section.comment dl .toolbar a {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    display: block;
}
section.comment dl a {
    padding: 0!important;
    border: 0!important;
}
dl.TAB dd.CONT label.node a {
    overflow: hidden;
    clear: both;
    display: block;
    padding: 1em;
    font-size:12px;
    border-bottom: 1px solid #CDCDCD;
}

section.comment dl .toolbar a:last-child {
    text-align: right;
    width: 90px;
}
section.comment dl .toolbar a {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    display: block;
    font-size:12px;
}
section.comment dl a {
    padding: 0!important;
    border: 0!important;
}
dl.TAB dd.CONT label.node a {
    overflow: hidden;
    clear: both;
    display: block;
    padding: 1em;
    border-bottom: 1px solid #CDCDCD;
}
section.comment dl p a {
    display: block;
    padding: .5em 0!important;
}
section.comment dl a {
    padding: 0!important;
    border: 0!important;
}
a:empty {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}
section.tips {
    padding: 3em;
    text-align: center;
    font-size:12px;
    color:#616161;
}
</style>